<template>
	<view class="page-content">
		<u-navbar title="发布文章" autoBack bgColor="#ECF6EA" fixed safeAreaInsetTop placeholder></u-navbar>

		<view class="content">
			<view class="main-box">
				<view class="box-text">
					<u--textarea v-model="textValue" placeholder="好的动态描述并使用适当的话题，可收到更多的点赞哦" count height="120"
						maxlength="500" confirmType="done"></u--textarea>
				</view>

				<view class="topic">
					<span class="title"># 添加话题</span>
					<view class="tabs">
						<span class="tabs-item" v-for="(item, index) in topicList" :class="{'chosen':item.isChosen}"
							:key="index" @click="chosen(item)">#{{ item.title }}</span>
					</view>
				</view>

				<view class="box-img">
					<u-upload :fileList="fileList1" name="1" multiple :maxCount="4" width="100" height="100"
						@afterRead="afterRead" @delete="deletePic"></u-upload>
				</view>
			</view>

			<view class="publish-bottom">
				<button class="publish-btn" @click="publish()">发布</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 文章内容
				textValue: '',
				// 上传图片列表
				fileList1: [],
				// 话题列表
				topicList: [{
						title: '记录美好',
						isChosen: true
					},
					{
						title: '分享干货',
						isChosen: false
					},
					{
						title: '随手拍',
						isChosen: false
					}
				]
			}
		},
		
		methods: {
			// 选中话题
			chosen(item) {
				item.isChosen = !item.isChosen
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList1`].length
				lists.map((item) => {
					this[`fileList1`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let jmResult = JSON.parse(result);
					console.log(jmResult);
					this.imgList.push(jmResult.data.src)
					let item = this[`fileList1`][fileListLen]
					this[`fileList1`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: jmResult.data.src
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://xstapi.xdjplus.com:8884/Api/Common/UploadImages', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.imgList.splice(event.index, 1)
			},
			publish() {
				if(this.textValue==''){
					this.$u.toast('请输入文章内容');
				}
				else{
					uni.request({
						url: "http://localhost:3000/article/add",
						method: "POST",
						data: {
							articleName: '4343',
							summary: this.textValue,
							content: '![img_goodimg2.jpg](http://localhost:3000/file-img_good-img2-2024-05-12-￥.jpg)',
							status: 1,
							type: 0,
							userId: uni.getStorageSync('userId')
					
						},
						success: (res) => {
							if (res?.data?.code == 200) {
								// console.log(res.data.data);
								setTimeout(function() {
									uni.navigateTo({
										url: "/pages/friend/friend"
									})
								}, 1000);
							} else {
								this.$u.toast(res?.data?.data?.msg);
							}
						},
						fail: (res) => {
							this.$u.toast(res?.data?.msg)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		.content {
			background-color: $gs-jpBg;
			.main-box {
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;

				.box-text {
					/deep/ .u-textarea {
						background-color: rgba(0, 0, 0, 0);
						border: none;

						.u-textarea__count {
							background-color: transparent !important;
						}
					}
				}

				.topic {
					.title {
						font-size: $uni-font-size-base;
						color: $uni-text-color;
					}

					.tabs {
						margin: $uni-spacing-col-base 0;
						padding: $uni-spacing-col-sm 0;
						display: flex;
						align-items: center;
						white-space: nowrap;
						overflow-x: scroll;
						overflow-y: hidden;

						.tabs-item {
							color: $uni-text-color-grey;
							padding: $uni-spacing-col-sm $uni-spacing-row-base;
							margin: 0 $uni-spacing-row-sm;
							border-radius: 30rpx;
							background-color: $uni-bg-color-grey;
							font-size: $uni-font-size-sm;
						}

						.chosen {
							background: linear-gradient(to right, #d0fce4, #FEFEFE);
							outline: 1rpx solid $gs-color-green;
						}
					}
				}
			}

			.publish-bottom {
				width: 100%;
				position: fixed;
				bottom: 31px;

				.publish-btn {
					width: 80%;
					color: $uni-bg-color-grey;
					background-color: $gs-btn;
					border-radius: 26px;
				}
			}

		}
	}
</style>